<template>
  <a-card :bordered="false">
    <h2>广东培正学院学生科研项目中期评审表</h2>
    <a-form :form="form">
      <table border="1px" widht="100%">
        <!-- 项目资料 -->
        <tr>
          <td width="50" rowspan="2" style="text-align:center;vertical-align:middle;">研<br />究<br />项<br />目</td>
          <td width="600">
            <a-form-item :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="项目名称">
              <a-input
                placeholder="请输入"
                v-decorator="[
                  'researchProject.name',
                  {
                    initialValue: formData.researchProject.name,
                    rules: [{ required: true, message: '请输入项目名称' }]
                  }
                ]"
                :disabled="!editable" 
              />
            </a-form-item>

            <a-form-item :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="立项编号">
              <a-input
                placeholder="请输入"
                v-decorator="[
                  'researchProject.no',
                  {
                    initialValue: formData.researchProject.no,
                    rules: [{ required: true, message: '立项编号' }]
                  }
                ]"
                :disabled="!editable" 
              />
            </a-form-item>

            <a-form-item :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="项目来源">
              <a-radio-group
                :disabled="!editable" 
                v-decorator="['researchProject.source', { rules: [{ required: true, message: '请选择项目来源' }] }]"
              >
                <a-radio :value="1">
                  自选
                </a-radio>
                <a-radio :value="2">
                  教师科研课题
                </a-radio>
                <a-radio :value="2">
                  社会实践
                </a-radio>
              </a-radio-group>
            </a-form-item>
            <a-form-item :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="经费资助">
              <a-radio-group
                :disabled="!editable" 
                v-decorator="['researchProject.support', { rules: [{ required: true, message: '请选择项目来源' }] }]"
              >
                <a-radio :value="1">
                  重点资助项目
                </a-radio>
                <a-radio :value="2">
                  一般资助项目
                </a-radio>
              </a-radio-group>
            </a-form-item>

            <a-form-item :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="起止年月">
              <a-range-picker
                :disabled="!editable" 
                format="YYYY-MM-DD"
                v-decorator="[
                  'researchProject.timeRange',
                  {
                    rules: [{ type: 'array', required: true, message: '请选择起止日期!' }]
                  }
                ]"
              />
            </a-form-item>

            <a-form-item :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="成果形式">
              <a-radio-group
                :disabled="!editable" 
                name="radioGroup"
                v-decorator="['researchProject.resultType', { rules: [{ required: true, message: '请选择成果形式' }] }]"
              >
                <a-radio :value="1">
                  调查报告
                </a-radio>
                <a-radio :value="2">
                  研究报告
                </a-radio>
                <a-radio :value="3">
                  论文
                </a-radio>
                <a-radio :value="4">
                  其他
                </a-radio>
              </a-radio-group>
            </a-form-item>
          </td>
        </tr>
        <!-- 指导老师 -->
        <tr>
          <td>
            <h4>指导老师</h4>
            <a-row :gutter="24">
              <a-col :span="12">
                <a-form-item :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="姓名">
                  <a-input
                    :disabled="!editable" 
                    placeholder=""
                    v-decorator="['instructor.name', { rules: [{ required: true, message: '请输入指导老师姓名！' }] }]"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="所属学院">
                  <a-input
                    placeholder=""
                    :disabled="!editable" 
                    v-decorator="[
                      'instructor.college',
                      { rules: [{ required: true, message: '请输入指导老师所属学院！' }] }
                    ]"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="最后学历">
                  <a-input
                    placeholder=""
                    :disabled="!editable" 
                    v-decorator="[
                      'instructor.education',
                      { rules: [{ required: true, message: '请输入指导老师学历！' }] }
                    ]"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="最后学位">
                  <a-input
                    placeholder=""
                    :disabled="!editable" 
                    v-decorator="[
                      'instructor.degree',
                      { rules: [{ required: true, message: '请输入指导老师学位！' }] }
                    ]"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="研究专长">
                  <a-input
                    placeholder=""
                    :disabled="!editable" 
                    v-decorator="[
                      'instructor.expertise',
                      { rules: [{ required: true, message: '请输入指导老师研究专长！' }] }
                    ]"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="职称">
                  <a-input
                    placeholder=""
                    :disabled="!editable" 
                    v-decorator="['instructor.title', { rules: [{ required: true, message: '请输入指导老师职称！' }] }]"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="联系电话">
                  <a-input
                    placeholder=""
                    :disabled="!editable" 
                    v-decorator="[
                      'instructor.phone',
                      { rules: [{ required: true, message: '请输入指导老师联系电话！' }] }
                    ]"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="邮箱">
                  <a-input
                    placeholder=""
                    :disabled="!editable" 
                    v-decorator="['instructor.email', { rules: [{ required: true, message: '请输入指导老师邮箱！' }] }]"
                  />
                </a-form-item>
              </a-col>
            </a-row>
          </td>
        </tr>
        <!-- 负责人 -->
        <tr>
          <td width="50" style="text-align:center;vertical-align:middle;">项<br />目<br />负<br />责<br />人</td>
          <td>
            <a-row :gutter="24">
              <a-col :span="12">
                <a-form-item :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="姓名">
                  <a-input
                    placeholder=""
                    :disabled="!editable" 
                    v-decorator="['director.name', { rules: [{ required: true, message: '请输入负责人姓名！' }] }]"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="学号">
                  <a-input
                    placeholder=""
                    :disabled="!editable" 
                    v-decorator="['director.stdNo', { rules: [{ required: true, message: '请输入负责人学号！' }] }]"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="所属学院">
                  <a-input
                    placeholder=""
                    :disabled="!editable" 
                    v-decorator="[
                      'director.college',
                      { rules: [{ required: true, message: '请输入负责人所属学院！' }] }
                    ]"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="专业">
                  <a-input
                    placeholder=""
                    :disabled="!editable" 
                    v-decorator="['director.major', { rules: [{ required: true, message: '请输入负责人专业！' }] }]"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="身份证号码">
                  <a-input
                    placeholder=""
                    :disabled="!editable" 
                    v-decorator="['director.id_card', { rules: [{ required: true, message: '请输入负责人身份证！' }] }]"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="班级">
                  <a-input
                    placeholder=""
                    :disabled="!editable" 
                    v-decorator="['director.clazz', { rules: [{ required: true, message: '请输入负责人班级！' }] }]"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="联系电话">
                  <a-input
                    placeholder=""
                    :disabled="!editable" 
                    v-decorator="['director.phone', { rules: [{ required: true, message: '请输入负责人联系电话！' }] }]"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="邮箱">
                  <a-input
                    placeholder=""
                    :disabled="!editable" 
                    v-decorator="['director.email', { rules: [{ required: true, message: '请输入负责人邮箱！' }] }]"
                  />
                </a-form-item>
              </a-col>
            </a-row>
          </td>
        </tr>
        <!-- 项目成员 -->
        <tr>
          <td width="50" style="text-align:center;vertical-align:middle;">项<br />目<br />组<br />成<br />员</td>
          <td>
            <a-table bordered :data-source="formData.members" :columns="columns">
              <span style="text-align:center;" slot="actions"
                >操作<a-button style="margin-left:15px" @click="handleAddMember" :disabled="!editable"  type="primary" icon="plus"
                  >添加</a-button
                ></span
              >
              <template
                v-for="col in ['name', 'college', 'major', 'stdNo', 'position', 'phone']"
                :slot="col"
                slot-scope="text, record, index"
              >
                <div :key="col">
                  <a-input
                    v-if="record.editable"
                    style="margin: -5px 0"
                    :disabled="!editable" 
                    :value="text"
                    @change="e => handleChange(e.target.value, record.key, col)"
                  />
                  <template v-else>
                    {{ text }}
                  </template>
                </div>
              </template>

              <template slot="operation" slot-scope="text, record, index">
                <div class="editable-row-operations">
                  <span v-if="record.editable">
                    <a @click="() => save(record.key)">保存</a>
                    <a-popconfirm style="margin-left: 15px" title="确定取消?" @confirm="() => cancel(record.key)">
                      <a>取消</a>
                    </a-popconfirm>
                  </span>
                  <span v-else>
                    <a :disabled="editingKey !== ''" @click="() => edit(record.key)">编辑</a>
                    <a-popconfirm style="margin-left: 15px" title="删除?" @confirm="() => del(record.key)">
                      <a>删除</a>
                    </a-popconfirm>
                  </span>
                </div>
              </template>
            </a-table>
          </td>
        </tr>

        <!-- 研究目的 -->
        <tr>
          <td width="50" style="text-align:center;vertical-align:middle;">研究目的、意义的简要说明</td>
          <td>
            <a-form-item>
              <a-textarea
                :disabled="!editable" 
                :autoSize="{ minRows: 4, maxRows: 8 }"
                allow-clear
                v-decorator="[
                  'researchProject.describe',
                  {
                    rules: [
                      { required: true, message: '请输入研究目的！' },
                      { minLength: 20, message: '至少20个字符！' }
                    ]
                  }
                ]"
              />
            </a-form-item>
          </td>
        </tr>

        <!-- 附件 -->
        <tr>
          <td width="50" style="text-align:center;vertical-align:middle;">附件</td>
          <td>
            <a-form-item style="padding:20px;">
              <x-upload :action="BaseUrl+'/sys/common/upload'" name="file" :data="{biz:'research_project'}" :default-file-list="defaultFileList" :multiple="true" @change="handleChange">
                <a-button v-if="editable"><a-icon type="upload" /> 上传文件 </a-button>
              </x-upload>
            </a-form-item>
          </td>
        </tr>
      </table>

      <h4 style="margin-top:15px">二、项目研究内容和成果预计</h4>
      <table border="1px" widht="100%">
        <tr>
          <td width="904px">
            <a-card
              style="margin-top:15px"
              :bordered="false"
              title="1.项目所涉及的学科领域、研究现状，本课题研究的主要思路、要解决的实际问题、应用价值及新意："
            >
              <a-form-item>
                <a-textarea
                  :disabled="!editable" 
                  :autoSize="{ minRows: 4, maxRows: 6 }"
                  allow-clear
                  v-decorator="[
                    'details[0].content',
                    {
                      rules: [{ required: true, message: '请输入内容！' }]
                    }
                  ]"
                />
              </a-form-item>
            </a-card>
            <a-card style="margin-top:15px" :bordered="false" title="2.进度安排以及对工作条件的要求：">
              <a-form-item>
                <a-textarea
                  :disabled="!editable" 
                  :autoSize="{ minRows: 4, maxRows: 6 }"
                  allow-clear
                  v-decorator="[
                    'details[1].content',
                    {
                      rules: [{ required: true, message: '请输入内容！' }]
                    }
                  ]"
                />
              </a-form-item>
            </a-card>
            <a-card style="margin-top:15px" :bordered="false" title="3.预计成果及提交方式：">
              <a-form-item>
                <a-textarea
                  :disabled="!editable" 
                  :autoSize="{ minRows: 4, maxRows: 6 }"
                  allow-clear
                  v-decorator="[
                    'details[2].content',
                    {
                      rules: [{ required: true, message: '请输入内容！' }]
                    }
                  ]"
                />
              </a-form-item>
            </a-card>
          </td>
        </tr>
      </table>

      <h4 style="margin-top:15px">三、申请项目经费预算表</h4>
      <table border="1px" widht="100%">
        <tr>
          <td width="904px" style="padding:15px">
            <a-form-item :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="申请资助金额">
              <a-input
                :disabled="!editable" 
                type="number"
                placeholder="请输入"
                v-decorator="['researchProject.fundAmount', { rules: [{ required: true, message: '请输入金额' }] }]"
              />
            </a-form-item>
            <a-row :gutter="[16, 16]">
              <a-col :span="4">科目</a-col>
              <a-col :span="6">经费（元）</a-col>
              <a-col :span="14">依据或说明</a-col>
            </a-row>
            <a-row :gutter="[16, 16]" v-for="(item, key) of formData.funds" :key="key">
              <a-col :span="4"
                >{{ item.name }}：<a-form-item v-show="false"
                  ><a-input v-decorator="[`funds[${key}].name`, { initialValue: item.name }]"/></a-form-item
              ></a-col>
              <a-col :span="6"
                ><a-form-item><a-input type="number" v-decorator="[`funds[${key}].amount`]"/></a-form-item
              ></a-col>
              <a-col :span="14"
                ><a-form-item><a-input v-decorator="[`funds[${key}].describe`]"/></a-form-item
              ></a-col>
            </a-row>
          </td>
        </tr>
      </table>

      <slot></slot>
    </a-form>
  </a-card>
</template>

<script>
import XUpload from '@/components/extends/XUpload'
import JUpload from '@/components/jeecg/JUpload'
import { merge } from 'lodash'
import { getProjectById } from '@/api/api'
let formData = {
  members: [],
  funds: [
    {
      name: '图书资料费',
      amount: '',
      describe: ''
    },
    {
      name: '调研差旅费',
      amount: '',
      describe: ''
    },
    {
      name: '复制费',
      amount: '',
      describe: ''
    },
    {
      name: '通讯费',
      amount: '',
      describe: ''
    },
    {
      name: '小型会议费',
      amount: '',
      describe: ''
    },
    {
      name: '劳务费',
      amount: '',
      describe: ''
    },
    {
      name: '其他',
      amount: '',
      describe: ''
    }
  ],
  details: [
    {
      content: '',
      title: '1.项目所涉及的学科领域、研究现状，本课题研究的主要思路、要解决的实际问题、应用价值及新意：'
    },
    {
      content: '',
      title: '2.进度安排以及对工作条件的要求：'
    },
    {
      content: '',
      title: '3.预计成果及提交方式：'
    }
  ],
  director: {
    clazz: '',
    college: '',
    email: '',
    id: '',
    id_card: '',
    major: '',
    name: '',
    phone: '',
    projectId: '',
    stdNo: ''
  },
  instructor: {
    college: '',
    degree: '',
    education: '',
    email: '',
    expertise: '',
    id: '',
    name: '',
    phone: '',
    projectId: '',
    title: ''
  },
  researchProject: {
    name: '',
    createTime: '',
    creatorId: '',
    creatorName: '',
    dealFlag: 0,
    describe: '',
    director: '',
    exportIndex: 0,
    finalFundAmount: 0,
    fundAmount: 0,
    instructor: '',
    resultType: '',
    source: '',
    startTime: '',
    endTime: '',
    support: ''
  }
}
export default {
  name: 'ProjectReview',
  components:{
    JUpload
  },
  data() {
    return {
      BaseUrl: window._CONFIG['domianURL'],
      loading:false,
      editable: {
        type: Boolean,
        default: true
      },
      editableFiexd: {
        type: Object,
        default: () => {
          return {}
        }
      },
      editingKey: '',
      cacheData: [],
      formData: Object.assign({}, formData),
      form: this.$form.createForm(this, {
        name: 'projectData'
      }),
      dataSource: [],
      columns: [
        {
          title: '姓名',
          dataIndex: 'name',
          scopedSlots: { customRender: 'name' }
        },
        {
          title: '所在学院及专业',
          dataIndex: 'college',
          scopedSlots: { customRender: 'college' }
        },
        {
          title: '学号',
          dataIndex: 'stdNo',
          scopedSlots: { customRender: 'stdNo' }
        },
        {
          title: '承担任务',
          dataIndex: 'position',
          scopedSlots: { customRender: 'position' }
        },
        {
          title: '联系电话',
          dataIndex: 'phone',
          scopedSlots: { customRender: 'phone' }
        },
        {
          //   title: '操作',
          dataIndex: 'operation',
          width: '220px',
          scopedSlots: { title: 'actions', customRender: 'operation' }
        }
      ]
    }
  },
  model: {
    prop: 'data',
    event: 'onchange'
  },
  props: {
    dataId: String,
    data: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  computed:{
    defaultFileList(){
      let list = []
      try {
        let arr = JSON.parse(this.formData.enclosures)||[]
        for(let i in arr){
            list.push({
              uid: i,
              name: arr[i].name,
              status: 'done',
              url: this.BaseUrl + arr[i].url
            })
        }
      } catch (error) {
        console.log(error)
      }
      
      return list
    }
  },
  beforeMount() {
    if (this.dataId) {
      this.loading = true
      getProjectById({ id: this.dataId }).then(res => {
        this.loading = false
        this.formData = merge({},res.result)
      })
    } else {
      this.loading = false
    }
  },
  watch:{
    data: {
      handler(nv, ov) {
        // this.formData = {}
        this.formData = merge({},this.formData, nv)
      },
      immediate: true,
      deep: true
    },
    formData: {
      handler(nv, ov) {
        this.$emit('onchange', nv)
      },
      immediate: true,
      deep: true
    },
    'formData.members':{
      handler(nv, ov) {
        this.form.getFieldDecorator('members', {initialValue:nv})
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    handleAddMember() {
      this.formData.members.push({
        key: this.formData.members.length + 1,
        college: '',
        major: '',
        name: '',
        phone: '',
        position: '',
        stdNo: ''
      })
    },
    handleChange(value, key, column) {
      const newData = [...this.formData.members]
      const target = newData.filter(item => key === item.key)[0]
      if (target) {
        target[column] = value
        this.formData.members = newData
      }
    },
    edit(key) {
      this.cacheData = merge([], this.formData.members)
      const newData = [...this.formData.members]
      const target = newData.filter(item => key === item.key)[0]
      this.editingKey = key
      if (target) {
        target.editable = true
        this.formData.members = newData
      }
    },
    save(key) {
      const newData = [...this.formData.members]
      const newCacheData = [...this.cacheData]
      const target = newData.filter(item => key === item.key)[0]
      const targetCache = newCacheData.filter(item => key === item.key)[0]
      if (target && targetCache) {
        delete target.editable
        this.formData.members = newData
        Object.assign(targetCache, target)
        this.cacheData = newCacheData
      }
      console.log(this.formData.members)
      this.editingKey = ''
    },
    cancel(key) {
      const newData = [...this.formData.members]
      const target = newData.filter(item => key === item.key)[0]
      this.editingKey = ''
      if (target) {
        Object.assign(target, this.cacheData.filter(item => key === item.key)[0])
        delete target.editable
        this.formData.members = newData
      }
    },
    del(key) {
      const dataSource = [...this.formData.members]
      this.formData.members = dataSource.filter(item => item.key !== key)
    }
  }
}
</script>

<style></style>
